<template>
	
	  <el-form :inline="true" :model="formParam" class="demo-form-inline"  ref="ruleFormRef"  :rules="rules"  status-icon>
	    <el-form-item label="用户名" prop="username">
	      <el-input v-model="formParam.username" placeholder="用户名" clearable />
	    </el-form-item>
	    <el-form-item label="状态" prop="status">
	      <el-select
	        v-model="formParam.status"
	        placeholder="选择状态"
	        clearable>
	        <el-option v-for="item in statusArray" :label="item.name" :value="item.value" />
	      </el-select>
	    </el-form-item>
	    <el-form-item label="日期" prop="date">
			<el-date-picker
			  v-model="formParam.date"
			  type="daterange"
			  range-separator="至"
			  start-placeholder="开始日期"
			  end-placeholder="结束日期"
			  format="YYYY-MM-DD"
			  value-format="YYYY-MM-DD"/>
		  
	    </el-form-item>
	    <el-form-item>
	      <el-button type="primary" @click="onSubmit(ruleFormRef)">查询</el-button>
	    </el-form-item>
	  </el-form>
	
	<el-table v-loading="loading" :data="tableData" stripe border >
		<el-table-column prop="userid" label="用户id" width="140" />
		<el-table-column prop="username" label="用户名" width="120" />
		<el-table-column prop="userpass" label="用户密码" />
		<el-table-column prop="status" label="状态" :formatter="statusFormatter"/>
		<el-table-column prop="credate" label="创建日期" />
	</el-table>
	<el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5, 15, 25, 35]" :total="pageParam.total" current-page="pageParam.page" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</template>

<script lang="ts" setup>
	
	import { ref, reactive } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElMessage } from 'element-plus'
	//网络
	import http from '../common/http.js'
	
	//状态
	const statusArray = ref([
		{name: '全部', value: '-1'},
		{name: '启用', value: '0'},
		{name: '未启用', value: '1'}
	])
	
	interface FormParam {
		username: string,
		status: string,
		date: string[]
	}
	
	const ruleFormRef = ref<FormInstance>()
	
	//当前日期 对天数加减
	const curentDateDay = (day: number) => {
		const currentDate = new Date()
		return new Date(currentDate.setDate(currentDate.getDate() + day));
	}
	
	//获取当前日期
	const getCurrentDate =	(num: number) => {
	  const now = curentDateDay(num)
	  const year = now.getFullYear()
	  const month = now.getMonth() + 1 // 月份是从0开始的，所以需要加1
	  const day = now.getDate()
	  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
	}
	
	//初始化日期默认日期
	const date = ref([getCurrentDate(-1), getCurrentDate(1)])
	
	//表单参数
	const formParam = reactive<FormParam>({
	  username: '',
	  status: '-1',
	  date: date.value,
	})
	
	const rules = reactive<FormRules<FormParam>>({
	  // username: [
	  //   { required: true, message: '请输入用户名', trigger: 'blur' },
	  //   { min: 3, max: 5, message: '长度是 3 到 5', trigger: 'blur' },
	  // ],
	  status: [
	    {
	      required: true,
	      message: '请选择状态',
	      trigger: 'change',
	    },
	  ],
	  date: [
	    {
	      // type: 'date',
	      required: true,
	      message: '请选择日期',
	      trigger: 'change',
	    },
	  ]
	})
	
	const loading = ref(false)
	
	//表单提交
	const onSubmit = async (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  await formEl.validate((valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  loading.value = true
		  getList()
	    } else {
	      console.log('error submit!', fields)
		  loading.value = false
	    }
	  })
	}
	
	//分页
	const pageParam = {
		pageNum: 1,
		pageSize: 10,
		total: 0,
		formParam
	}
	
	const data = ref()
	
	const tableData = ref([])
	
	const getList = () => {
		http.post("/user/list", {pageParam})
		  .then(function (response) {
		    console.log(response)
			data.value = response.data.data
			tableData.value = data.value.list
			pageParam.total = data.value.total
			loading.value = false
		  })
		  .catch(function (error) {
		    console.log(error)
			loading.value = false
			ElMessage.error(error)
		  })
	}

	const handleSizeChange = (val: number) => {
	  pageParam.pageSize = val
	  getList()
	}

	const handleCurrentChange = (newPage: number) => {
      pageParam.pageNum = newPage
      getList()
    }
	
	//格式化
	const statusFormatter = (row, column) =>{
		var status = row.status
		for (var item of statusArray.value) {
			if (item.value == status) {
				return item.name
			}
		}
		
	}
		
</script>

<style>

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>